<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        #div1{width: 400px;height: 100px;background: orange; margin: auto;}
        #div2{width: 400px;height: 400px;background: peachpuff; margin: auto;}
        #input1{width: 370px;height: 30px;font-size: 18px;margin: 9px;border-radius: 15px;
            border: 1px solid peachpuff;padding-left: 10px;}
        #div1 button{width: 100px;height: 30px;font-size: 18px;margin: 10px 15px;border-radius: 15px;}
        #div2 div{border-bottom: 1px dashed gray;padding: 2px;position: relative;}
        #div2 div button{position: absolute;right: 0px;}
    </style>
    <script>
        window.onload = function(){
            var oDiv1 = document.getElementById("div1");
            var oDiv2 = document.getElementById("div2");
            var oInput = document.getElementById("input1");
            //获取div1下面所有的button
            var aBtns = oDiv1.getElementsByTagName("button");
            //分别给三个按钮添加不同的点击函数
            aBtns[0].onclick = function(){
                if(!oInput.value){
                    alert("输入内容不能为空");
                }else{
                    var nodeDiv = document.createElement("div");
                    var oText = document.createTextNode(oInput.value);
                    var nodeBtn = document.createElement("button");
                    nodeDiv.style.backgroundColor = ramColor();
                    nodeBtn.appendChild(document.createTextNode("删除"));
                    nodeBtn.onclick = function(){
                        nodeBtn.parentNode.parentNode.removeChild(nodeBtn.parentNode);
                    }
                    nodeDiv.appendChild(oText);
                    nodeDiv.appendChild(nodeBtn);
                    oDiv2.appendChild(nodeDiv);
                    oInput.value = "";
                }
            }
            aBtns[1].onclick = function(){
                // 删除最后一个节点
                oDiv2.removeChild(oDiv2.lastChild);
            }
            aBtns[2].onclick = function(){
                // 拷贝最后一个节点
                var newNode = oDiv2.lastChild.cloneNode(true);
                newNode.onclick = function(){
                    newNode.parentNode.removeChild(newNode);
                }
                oDiv2.appendChild(newNode);
            }

            function ramColor(){
                return "rgba(" + parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+",1)";
            }
        }
    </script>
</head>
<body>
    <div id="div1">
        <input type="text" id="input1" placeholder="输入内容">
        <button>增加</button>
        <button>删除</button>
        <button>拷贝</button>
    </div>
    <div id="div2">
        <!-- <div>xxx<button>x</button></div>
        <div>xxx<button>x</button></div>
        <div>xxx<button>x</button></div> -->
    </div>
</body>
</html>